<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8' />
    <meta name='viewport' content='width=device-width, initial-scale=1.0' />
    <title>Document</title>
    <script src='../js/vue.js'></script>
</head>

<body>
    <div id='root'>
        <hello></hello>
        <br>
        <school>
        </school>
        <br>
    </div>
    <script>

        const student = Vue.extend({
            name: 'student',
            template: `
            <div>
                <h2> 姓名:{{name}}</h2> 
                <h2>年龄:{{age}}</h2>
            </div > `,
            data() {
                return {
                    name: '张三',
                    age: 18
                }
            },
        })

        const school = Vue.extend({
            name: 'school',
            template: `
            <div> 
                <h2>名称：{{name}}</h2> 
                <h2> 地址：{{ address }}</h2>
                 <button @click="showName" > 点我提示名称</button > 
                <student></student>
                </div>`,
            data() {
                return {
                    name: "北大",
                    address: "北京海淀"
                }
            }, methods: {
                showName() {
                    alert(this.name);
                },
            }, components: {
                student
            }
        })


        const hello = Vue.extend({
            name: 'hello',
            template: `
        <div>
            <h2>hello {{name}}</h2>
        </div>
      `,
            data() {
                return {
                    name: 'world',
                };
            },
        });

        //全局注册
        Vue.component('hello', hello)
        //2注册组件（局部注册）
        const vm = new Vue({
            el: '#root',
            data: {
            },
            components: {
                school,
                hello
            }
        });

    </script>
</body>

</html>